{extend name="public/base" /}
{block name="css"}
<style>

  .container-fluid {
    background-color: #ffffff;
  }

  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  img {
    width: 100%;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid">
  <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/banner/banner-rz.jpg" >

  <div class="mx-auto" style="background: #ECBFA8">
    <img alt="" style="margin-top: 25px;width: 62%" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/title_sp.png" >
    <video width="94%" id="video" poster="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/shiping.png" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/5thanniversary.mp4" style="height:70%;margin: 25px 0;display:block;"></video>
  </div>

  <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/dk.jpg" >

  <div class="mx-auto" style="background: #651617">
    <div style="text-align: center;display:flex;align-items:center;justify-content:center;padding: 20px 15px;">
      <img alt="" id="no2" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/tab2.png" style="width: 28%;">
      <div style="width: 8%;height:3px;background: #E6A67F"></div>
      <img alt="" id="no1" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/tab1.png" style="width: 28%;">
      <div style="width: 8%;height:3px;background: #E6A67F"></div>
      <img alt="" id="no3" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/tab3.png" style="width: 28%;">
    </div>
  </div>

  <div id="link2" style="overflow: scroll">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/ZMYJ/rz1.jpg">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/ZMYJ/rz2.jpg">
    <img class="order" alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/ZMYJ/rz3.jpg">
  </div>

  <div id="link1">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/UJGC/zz1.jpg">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/UJGC/zz.jpg">
    <img class="order" alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/UJGC/zz3.jpg">
  </div>

  <div id="link3">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/DGZJ/gz1.jpg">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/DGZJ/gz2.jpg">
    <img class="order" alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/DGZJ/gz3.jpg">
  </div>
  <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/ppyd.jpg">
  <div style="margin: 25px;color: #333333;font-size: 12px;text-align: center;">
    *以上礼品以实物为准，活动详情咨询工作人员<br>
    以上活动解释权归致美优家所有
  </div>
</section>
{/block}
{block name="js"}
<script>
    initWxShare('5周年家装盛典', 'U家工场5年历程全纪实');

    const video = document.querySelector('#video');

    video.onclick = function() {
        if(video.paused){
            video.play();
        }else{
            video.pause();
        }
    };

    $("#no1").click(function() {
        document.getElementById("link1").scrollIntoView(true);
    });

    $("#no2").click(function() {
        document.getElementById("link2").scrollIntoView(true);
    });

    $("#no3").click(function() {
        document.getElementById("link3").scrollIntoView(true);
    });

    $('.order').on('click', function () {
        showAppointmentLayer();
    });
</script>
{/block}